<template>
  <div
    id="song-list"
    v-infinite-scroll="load"
    infinite-scroll-disabled="isLoadBusy"
    infinite-scroll-throttle-delay="1000"
    infinite-scroll-distance="20"
  >
    <div class="big-banner">
      <div class="mask-blur" :style="{background:'url('+bannerList.coverImgUrl+')' }"></div>
      <div class="img">
        <img v-lazy="bannerList.coverImgUrl" alt="img" />
      </div>
      <div class="info">
        <div class="flag"><i class="iconfont icon-crown"></i>精品歌单</div>
        <div class="title">{{ bannerList.name }}</div>
        <div class="desc">{{ bannerList.copywriter }}</div>
      </div>
    </div>
    <div class="song-list-box">
      <SongListCover
        class="song-list-item"
        v-for="item in songList.slice(1)"
        :key="item.id"
        :coverInfo="{
          id: item.id,
          count: item.playCount,
          picUrl: item.coverImgUrl,
          name: item.name,
        }"
      />
    </div>
    <!-- 回到顶部 -->
    <template>
      <el-backtop
        target="#song-list" 
        :right="30"
        :bottom="120"
      ></el-backtop>
    </template>
  </div>
</template>

<script>
import { mapState } from "vuex";
import SongListCover from "@/components/SongListCover";
export default {
  name: "SongList",
  data() {
    return {
      songList: [],
      bannerList: {},
      isLoadBusy: false,
    };
  },
  computed: {
    ...mapState({
      highQualityPlayList: (state) => state.home.highQualityPlayList,
    }),
  },
  watch: {
    highQualityPlayList: {
      deep: true,
      handler(newValue) {
        // vuex加载完毕
        this.songList = newValue.playlists;
        this.bannerList = this.songList[0];
        //   去除加载繁忙
        this.isLoadBusy = false;
      },
    },
  },
  mounted() {
    this.$store.dispatch("highQualityPlayList");
  },
  components: {
    SongListCover,
  },
  methods: {
    load() {
      console.log("loadmore");
      //   进入加载繁忙
      this.$store.dispatch(
        "highQualityPlayList",
        this.highQualityPlayList.lasttime
      );
      this.isLoadBusy = true;
    },
  },
};
</script>

<style lang='less'>
#song-list {
  height: 80vh;
  overflow: scroll;
  .big-banner {
    margin-top: 20px;
    padding: 15px;
    display: flex;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    .mask-blur {
      position: absolute;
      background: red;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: -1;
      filter: blur(12px) brightness(0.5);
    }
    .img {
      width: 150px;
      img {
        border-radius: 5px;
        width: 100%;
      }
    }
    .info {
      margin-left: 20px;
      .flag {
        border: 1px rgb(231, 170, 90) solid;
        color: rgb(231, 170, 90);
        border-radius: 20px;
        display: inline-block;
        padding: 4px 12px;
        margin-top: 20px;
      }
      .title {
        color: #fff;
        margin-top: 20px;
        font-size: 16px;
      }
      .desc {
        margin-top: 5px;
        color: #999;
        font-size: 14px;
      }
    }
  }
  .song-list-box {
    display: flex;
    flex-wrap: wrap;

    justify-content: space-between;
    .song-list-item {
      margin-top: 15px;
      width: 18%;
      padding: 1%;
    }
  }
}
</style>